
<template>
    <div>
        <div class="top">
          <div class="left">
            <img src="../assets/03.png" alt="">
          </div>
          <div class="right">

            <div class="block" >
              <el-carousel >
                <el-carousel-item v-for="item in 4" :key="item">
                  <a href="#/StorePage">
                  <section v-for="aa in show" id="dd">
                    <img :src="aa.image_url" alt="">
                    <p>{{aa.name}}</p>
                    <span class="aa">￥{{aa.price}}</span>
                    <span class="as">￥{{aa.unprice}}</span>
                  </section>
                  </a>
                </el-carousel-item>
              </el-carousel>
            </div>

          </div>
        </div>
      <div class="bottom">
        <ul >
          <li v-for="zz in tu"><img :src="zz" alt=""></li>
        </ul>
      </div>
    </div>
</template>

<script>
  import datas from '../query'
    export default {
        data: function () {
            return {
              show:datas.data,

              tu:[
                'https://s10.mogucdn.com/mlcdn/c45406/190426_39lek9f29hjh4l6i60jllc5a43333_940x300.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190426_49ffd3lg8kfbgjaaf93i77di08ijh_460x300.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190426_700hh210gd04kbbb4g1k5d8bkagg2_460x300.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190426_2k1dadeaf606b4587ddj527efb90e_460x300.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190221_113d1fi40260220c6d9k4egjf05a8_460x300.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190221_258gh0kddhb9dcjhakbhh85eg74kj_460x300.jpg_999x999.v1c0.81.webp'
              ]
            }
        },

    }
</script>

<style scoped>
  .top{
    overflow: hidden;
    width:90%;
    margin: 0 auto;
  }
  .top .left{
    float: left;
    width: 10%;
  }
  .top .right{
    float: right;
    width: 86%;
    /*background: orange;*/
  }
  .el-carousel >>> .el-carousel__indicators{
    display: none !important;
  }
  .el-carousel >>> .el-carousel__container{
    height: 295px !important;
  }

  .el-carousel-item{
    overflow: hidden;
  }
  .block a{
    color: #66667a;
  }
  #dd{
    width:14%;
    float: left;
    /*border: solid 1px #000;*/
    margin: 1.2%;
  }
  #dd img{
    width: 100%;
    height: 220px;
  }
  #dd p{
    width:90%;
    height: 20px;
    text-align: left;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 5px;
  }
  #dd .aa{
    float: left;
    margin-left: 10px;
    color: red;
    font-size: 20px;
  }
  #dd .as{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    text-decoration:line-through;
    color: #ccc;
  }
  .bottom{
    width: 90%;
    margin: 0 auto;
  }
  .bottom ul{
    margin-top:10px ;
    overflow: hidden;
  }
  .bottom li{
    width: 13%;
    height: 145px;
    float: left;
    margin-left: 1%;
  }
  .bottom li:first-child{
    width: 26%;
    margin-left: 0;
  }
  .bottom li img{
    width: 100%;
  }

</style>
